<template>
  <div class="storerm">
    <h2>土豆集库房存销量对比柱状图</h2>
    <IEcharts
      :loading="loading"
      :option="bar"
      @ready="onReady"
      @click="onClick"
    />
  </div>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .storerm {
    width: 100%;
    height: 300px;
  }
  .echarts {
    width: 100%;
    height: 300px;
  }
</style>

<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data: () => ({
      userid: localStorage.userid,
      loading: true,
      bar: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data:['存量', '销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '存量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
      },
      saleqtys: [],
      storerms: []
    }),
    created() {
      window.addEventListener('setItem', ()=> {
        this.userid = localStorage.getItem('userid');
      })
    },
    mounted() {
      this.getData()
    },
    methods: {
      filterStoreqty: function(item) {
        this.saleqtys.push(item.saleqty);
        this.storerms.push(item.storename);
        return item.storeqty;
      },
      getData: function () {
        let that = this;
        // this.axios({
        //   method: 'get',
        //   responseType: 'json',
        //   url: '/sales/Whoutform!countWhinfo.action',
        //   params: {userguid: that.userid}
        //   //params: {userguid: 'DDD69D07C5C04C6781A3D0A56AF147AF'}
        // }).then(response => {
        //   if (response.status) {
        //     let listData = response.data.list;
        //     console.log('response.list:', response.data.list)
        //     let storeqtys = listData.map(that.filterStoreqty);
        //     console.log('storeqtys:', storeqtys)
        //     that.bar.xAxis.data = that.storerms;
        //     that.bar.series[0].data = storeqtys;
        //     that.bar.series[1].data = that.saleqtys;
        //   } else {
        //     this.toastText(response.msg);
        //   }
        // });
      },
      doRandom() {
        const that = this;
        let data = [];
        for (let i = 0, min = 5, max = 99; i < 6; i++) {
          data.push(Math.floor(Math.random() * (max + 1 - min) + min));
        }
        that.loading = !that.loading;
        that.bar.series[0].data = data;
      },
      onReady(instance, ECharts) {
        this.loading = false;
      },
      onClick(event, instance, ECharts) {
        console.log(arguments);
      }
    }
  };
</script>

<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>
